<template>
    <div class="container">
        <el-main>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>论坛注册</span>
                </div>
                <el-form ref="form" :rules="rules" :model="registerForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="registerForm.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="registerForm.password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="repeatPassword">
                            <el-input type="password" v-model="registerForm.repeatPassword"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleRegister">注册</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-form-item>
                        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                        已有账号？<el-link type="primary" @click="changeType">登录</el-link>
                </el-form>
            </el-card>
        </el-main>
    </div>
</template>
<script>
import axios from 'axios'
import getUrl from '../../../assets/js/getPath'

export default {
    name:'RegisterBox',
    data(){
        var checkPassword = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return{
            registerForm:{
                username :'',
                password :'',
                repeatPassword:''
            },
            rules:{
                username:[
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }
                ],
                repeatPassword:[
                    { required: true, validator: checkPassword, trigger:'blur'}
                ]
            },
        }
    },
    methods:{
        reset:function(){
            this.$refs.form.resetFields();
        },
        changeType:function(){
            this.$emit("changeType","LoginBox");
        },
        handleRegister:function(){
            console.log(this.registerForm);
            this.$refs.form.validate(async (valid) => {
                if(!valid) return;
                let url = getUrl('register');
                try{
                    const {data:res} = await axios.post(url,this.$data.registerForm);
                    if(res.meta.status!==200) return this.$message.error("注册失败，请稍后重试！");
                    if(res.data.res === 0){
                        this.$message.success("注册成功！");
                        this.$router.push('/login');
                    }else{
                        this.$message.error("用户名已存在！");
                    }
                }catch(e){
                    this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
html,body{
    width:100%;
    height: 100%;
}
// .container{
//     width: 100%;
//     height: 100%;
//     background-color: #eee;
// }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    margin: 0 auto;
  }
</style>